<template>
	<view>
		<!-- index -->
		<!-- 顶部占位 -->
		<!-- #ifdef APP-PLUS -->
		<!-- <view-navbar></view-navbar> -->
		<!-- #endif -->
		<!-- 搜索 -->
		<view class="h44 margin">
			<view class="flex-between" style="padding-top: 10rpx;padding-bottom: 16rpx;">
				<view class="" style="width: 608rpx;">
					<u-search :showAction="false" disabled @click="$pub.go('/pages_home/search/search')"
						placeholder="搜索医生、商品、医院" v-model="keyword" :clearabled="true" searchIconColor="#7976E9"
						borderColor="#DDDDDD" bgColor="#ffffff"></u-search>
				</view>
				<view class="flex-cen">
					<image @click="$pub.go('/pages_shop/shop/shopcart/shopcart')" mode="widthFix"
						src="/static/img/goodslist/02-gowuce.svg" alt="" style="width: 42rpx;height: 42rpx;" />
				</view>
			</view>
		</view>
		<!-- 医疗器械 -->
		<view class="list margin flex-wrap" style="">
			<view class="item flex4" v-for="(item, index) in list2" :key="index"
				@click="$pub.go(`/pages_shop/shop/shopcate/shopcate?type=${encodeURIComponent(JSON.stringify(index))}`)">
				<view class=" flex-cc" style="padding: 16rpx 38rpx 18rpx 38rpx;">
					<image :src="item.url" alt="" style="height: 60rpx;height: 60rpx;" mode="heightFix" />
				</view>
				<view class="size_14">
					{{ item.name }}
				</view>
			</view>
		</view>
		<!-- 惠明礼包 -->
		<view class="margin" v-if="false">
			<image src="http://storage.dezhoucloud.com/img/goods/banner2.svg" alt="" style="" mode="widthFix" />
		</view>
		<!-- 防疫物资 -->
		<view class="margin">
			<view
				style="display: flex;justify-items: center;align-items: center;padding-top: 30rpx;padding-bottom: 40rpx;">
				<view class="left-line ml10 mr10"></view>
				<h4 class="size_17">防疫物资</h4>
			</view>
			<!-- @click="$pub.go('/pages/goodsDetail/goodsDetail')" -->
			<view class="flex-between">
				<view class="item2 ms17">
					<image src="http://storage.dezhoucloud.com/img/goods/goods.png" alt="" mode="widthFix" />
					<h5 class="size_14">海氏海诺成人医用口罩...</h5>
					<text class="size_12 color_84">10片/盒</text>
					<view class="flex">
						<u-text mode="price" text="49.00" color="#F8662D"></u-text>
						<img src="/static/img/goodslist/03-orangegowuce.svg" alt="">
					</view>
				</view>
				<view class="item2  ms17">
					<image src="http://storage.dezhoucloud.com/img/goods/goods.png" alt="" mode="widthFix" />
					<h5 class="size_14">海氏海诺成人医用口罩...</h5>
					<text class="size_12 color_84">10片/盒</text>
					<view class="flex">
						<u-text mode="price" text="49.00" color="#F8662D"></u-text>
						<img src="/static/img/goodslist/03-orangegowuce.svg" alt="">
					</view>
				</view>
			</view>
		</view>
		<!-- line -->
		<view class="line">
		</view>
		<!-- hot -->
		<view class="margin">
			<!-- hot分类 -->
			<u-tabs :list="list1" keyName="subtotalName" @click="click" lineWidth="126rpx" lineColor="#7976E9"
				:activeStyle="{
        color: '#7976E9',
        fontWeight: 'bold',
        transform: 'scale(1.05)'
      }" :inactiveStyle="{
  color: '#848484',
  transform: 'scale(1)'
}" itemStyle="padding-left: 30rpx; padding-right: 30rpx; height: 68rpx;"></u-tabs>
			<!-- hotData -->
			<view class="flex-wrap" v-if="list1Data.length">
				<view class="item3 p-10" style="width: 50%;" v-for="v, i in list1Data" :key="i"
					@click="$pub.go(`/pages_shop/goodsDetail/goodsDetail?data=${v.uproductid}`)">
					<!-- <image :src="v.uproductPic ||'/static/img/goodslist/goods.png' " alt="" mode="widthFix"> -->
					<image src="http://storage.dezhoucloud.com/img/goods/goods.png" alt="" class="size-200" />
					<h5 class="size_14">{{ v.uproductName || '海氏海诺成人医用口罩' }}</h5>
					<text class="size_12 color_84">
						{{ v.uproductSpecs || '10片/盒' }}
					</text>
					<view class="flex">
						<u-text mode="price" :text="v.uretailPrice || '50.00'" color="#F8662D"></u-text>
						<img src="/static/img/goodslist/03-orangegowuce.svg" alt="">
					</view>
				</view>
				<!-- <u-loadmore :status="status" /> -->
			</view>
			<u-empty mode="data" v-else></u-empty>
			<!--  -->
		</view>
		<!-- tabs item -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: "",
				/* 第一个分类额外添加其他数据 */
				list2: [],
				/* 第一个分类图片数据 */
				list3: [{
						name: "医疗器械",
						url: "/static/img/goodslist/01-wenduji.png",
						productTypeId: "1",
					},
					{
						name: "慢病用药",
						url: "/static/img/goodslist/04-man.png",
						productTypeId: "2",
					},
					{
						name: "药食同源",
						url: "/static/img/goodslist/05-food.png",
						productTypeId: "3",
					},
					{
						name: "感冒咽炎",
						url: "/static/img/goodslist/06-man2.png",
						productTypeId: "3",
					},
					{
						name: "特医食品",
						url: "/static/img/goodslist/07-bigwan.png",
						productTypeId: "4",
					},
					{
						name: "生活用品",
						url: "/static/img/goodslist/08-life.png",
						productTypeId: "5",
					},
					{
						name: "婴儿药品",
						url: "/static/img/goodslist/09-son.png",
						productTypeId: "6",
					},
					{
						name: "其他",
						url: "/static/img/goodslist/10-other.png",
						productTypeId: "7",
					},
				],
				/* 热门分类 */
				list1: [{
						name: "慢病用药",
					},
					{
						name: "妇科保健",
					},
					{
						name: "风湿关节",
					},
					{
						name: "家中常备",
					},
				],
				/* 热门 */
				list1Data: [],
				/* 热门分类搜素 */
				form: {
					pageSize: 1,
					pageNum: 1,
					subtotalId: null,
				},
				/* 默认分类 */
				cateId: null,
				/* 加载更多 */
				status: "nomore",
			};
		},
		onShow() {
			this.hotProduct();
			this.hotProductCate();
		},
		methods: {
			setImg() {},
			/* hotCate */
			async hotProductCate() {
				let re = await this.$API.productApi.hotProductCate();
				this.list1 = re;
				/* 默认 */
				this.cateId = this.list1[0].subtotalId;
			},
			/* hotData */
			async hotProduct() {
				let re = await this.$API.productApi.hotProduct(this.form);
				this.list1Data = re;
			},
			/* 分类切换 */
			click(item) {
				console.log("item", item);
				let id = item.subtotalId;
				/* 分类数据 */
				this.form.subtotalId = id;
				this.hotProduct();
			},
			/* 第一个分类 */
			async getListKind() {
				let re = await this.$API.productApi.getListType();
				re = re.map((i) => {
					this.list3.map((d) => {
						if (d.productTypeId == i.productTypeId) i.url = d.url;
					});
					return i;
				});
				/* 补充数据 */
				re.push({
					name: "其他",
					url: "/static/img/goodslist/10-other.png",
					productTypeId: "7",
				});
				this.list2 = re;
			},
		},
		onLoad() {},
		onShow() {
			this.getListKind();
			this.hotProductCate();
			/* 默认 */
			this.form.subtotalId = this.cateId;
			this.hotProduct();
		},
		/* 更多商品 */
		onReachBottom() {
			this.status = "loading";
			setTimeout(() => {
				this.status = "nomore";
				this.form.pageNum++;
				this.hotProduct();
			}, 500);
		},
	};
</script>

<style lang="scss">
	.size-200 {
		width: 300rpx;
		height: 300rpx;
	}

	/* #ifdef MP */
	::v-deep .u-search__content__input {
		font-size: 28rpx !important;
	}

	/* #endif */
	.item {
		text-align: center;
	}

	.item3 {
		padding-top: 34rpx;
		/* padding-bottom: 50rpx; */
	}

	.flex-cc {
		display: flex;
		justify-content: center;
	}

	::v-deep .u-search__content__input {
		font-size: 28rpx !important;
	}
	::v-deep .u-tabs__wrapper__nav__item__text{
			font-size: 28rpx !important;
	}
</style>